<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--基于框架引入的css-->
		<link href="../../libs/css/mui.min.css" rel="stylesheet" />
		
		<!--自定义样式引入-->
		<link href="../../css/common.css" rel="stylesheet" />
		<link href=" ../../css/active.css" rel="stylesheet" />
	</head>

	<body class="my-active">
		<div id="main"  v-cloak="">
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">我的活动</h1>
		    <a class=" mui-icon mui-pull-right" @click="openActiveList">所有活动</a>
		    
		</header>
			<!--下拉刷新容器-->
			<div class="mui-content">
			  <div id="slider" class="mui-slider">
			    <!--数据列表-->
			    	<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<a class="mui-control-item mui-active" href="#item1">
							待参加活动
						</a>
						<a class="mui-control-item" href="#item2">
							已结束活动
						</a>
					</div>
					<div id="item1" class="mui-slider-item mui-control-content mui-active">
				    	<div class="mui-card">
				    		<div class="mui-card-title">贵阳省投资促进局<span class="mui-icon mui-pull-right mui-icon-chat"></span></div>
				    		<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../img/active/默认图片大@2x.png)"></div>
				    		<div class="mui-card-content">
				    			<div class="mui-card-content-inner">
				    				<div class="mui-row">
				    					<p>活动时间:</p>
				    					<div>2018-09-09~2018-09-09 <span>(3天)</span></div>
				    				</div>
				    				<div class="mui-row">
				    					<p>活动地点:</p>
				    					<div class="mui-ellipsis">贵州省贵阳市贵安新区索菲特大酒店<span class="mui-icon mui-icon-locate"></span></div>
				    				</div>
				    				<div class="mui-row">
				    					<p >已经报名:</p>
				    					<div class="box-flex"><div class="flex-1">20/100</div><div class="flex-1 mui-text-center">报名已截止</div><div class="flex-1 mui-text-right">已报名</div></div>
				    				</div>
				    				<div class="box-flex my-active-info">
				    					
				    					<div class="flex-1">机构报名信息</div>
				    					<div class="flex-1 mui-text-right">个人报名信息(待完善)</div>
				    				</div>
				    			</div>
				    		</div>
						</div>

					</div>
					<div id="item2" class="mui-slider-item mui-control-content">
				    	<div class="mui-card">
				    		<div class="mui-card-title">贵阳省投资促进局</div>
				    		<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../img/active/默认图片大@2x.png)"></div>
				    		<div class="mui-card-content">
				    			<div class="mui-card-content-inner">
				    				<div class="mui-row">
				    					<p>活动时间:</p>
				    					<div>2018-09-09~2018-09-09 <span>(3天)</span></div>
				    				</div>
				    				<div class="mui-row">
				    					<p>活动地点:</p>
				    					<div class="mui-ellipsis">贵州省贵阳市贵安新区索菲特大酒店<span class="mui-icon mui-icon-locate"></span></div>
				    				</div>
				    				<div class="mui-row">
				    					<p >已经报名:</p>
				    					<div class="box-flex"><div class="flex-1">20/100</div><div class="flex-1 mui-text-center">报名已截止</div><div class="flex-1 mui-text-right"></div></div>
				    				</div>
				    			</div>
				    		</div>
				    	</div>
					</div>
			  </div>
			</div>
		</div>
		<script src="../../libs/js/jquery-3.2.1.min.js"></script>
		<script src="../../libs/js/mui.min.js"></script>
		<script src="../../libs/js/vue.min.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/config.js"></script>
		<script src="../../js/active/myActive.js"></script>
	</body>

</html>